<template>
	<view class="page">
		<view class="flex align-center bg-white padding-tb-sm padding-lr" v-if="role === 'principal'">
			<view class="flex-1" @click="toUpdateTime">
				<u-text iconStyle="color:#999;font-size:36rpx;margin-left:10rpx;margin-top:10rpx" suffixIcon="edit-pen"
					text="时间：周日上午" size="28rpx" color="#333"></u-text>
			</view>
			<view class="flex-1" @click="toUpdateLocation">
				<u-text align="right" iconStyle="color:#999;font-size:36rpx;margin-left:10rpx;margin-top:10rpx"
					suffixIcon="edit-pen" text="位置：教室1" size="28rpx" color="#333"></u-text>
			</view>
		</view>
		<view class="main padding-0">
			<view class="flex padding-lr padding-tb-sm">
				<view class="flex-1">
					<u-text text="班级课程表" size="28rpx" color="#999"></u-text>
				</view>
				<view class="flex align-center gap">
					<u-button size="small" shape="circle" text="编辑" :customStyle="{ color: themePrimary }"
						:color="themeTertiary"></u-button>
					<u-button size="small" shape="circle" text="新增" :customStyle="{ color: themePrimary }"
						:color="themeTertiary"></u-button>
				</view>
			</view>
			<view class="table-box">
				<view class="table-row">
					<text style="flex:1.5">日期</text>
					<text style="flex:1.5">时间</text>
					<text style="width:100rpx">地点</text>
				</view>
				<view class="table-row" v-for="item in studentList" :key="item.id">
					<text style="flex:1.5">{{ item.name }}</text>
					<text style="flex:1.5">{{ item.time }}</text>
					<text style="width:100rpx">{{ item.location }}</text>
				</view>
			</view>
		</view>
	</view>
</template>
<script setup>
import { ref } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import { useTheme } from '@/composables/useTheme';
const { themePrimary, themeTertiary } = useTheme();
const role = ref('');
onLoad(() => {
	role.value = uni.getStorageSync('role');
});

const studentList = ref([
	{
		id: 1,
		name: '9月17日（周六）',
		time: '10:00-12:00',
		location: '教室1',
	},
	{
		id: 2,
		name: '9月18日（周日）',
		time: '10:00-12:00',
		location: '教室1',
	},
	{
		id: 3,
		name: '9月19日（周一）',
		time: '10:00-12:00',
		location: '教室1',
	},
	{
		id: 4,
		name: '9月20日（周二）',
		time: '10:00-12:00',
		location: '教室1',
	},
	{
		id: 5,
		name: '9月21日（周三）',
		time: '10:00-12:00',
		location: '教室1',
	},
	{
		id: 6,
		name: '9月22日（周四）',
		time: '10:00-12:00',
		location: '教室1',
	}
])

const toUpdateTime = () => {
	console.log('修改时间');
	uni.navigateTo({
		url: '/pages/common/schedule/updateTime'
	});
};

const toUpdateLocation = () => {
	console.log('修改位置');
	uni.navigateTo({
		url: '/pages/common/schedule/updateLocation'
	});
};
</script>
<style lang="scss" scoped>
.table-box {
	border: solid 1px #0060E6;
	border-radius: 24rpx;
	overflow: hidden;
	margin: 20rpx 30rpx;

	.table-row {
		display: flex;
		justify-content: space-between;
		padding: 24rpx 32rpx;
		color: #333;
		font-size: 28rpx;

		&:nth-child(odd) {
			background-color: #EBF3FF;
		}

		&:first-child {
			font-weight: bold
		}

		&:last-child {
			border-bottom-left-radius: 24rpx;
			border-bottom-right-radius: 24rpx;
		}
	}
}
</style>